<template>
	<div>
		<ul>
			<!-- <li v-for="data in $store.state.comingList" :key="data.filmId"> -->
			<li v-for="data in $store.getters.comingListGetter" :key="data.filmId">
				<img :src="data.poster" alt="">
				<h3>{{ data.name }}</h3>
				<p>上映日期: {{ $moment(data.show_date).format('YYYY-MM-DD') }}</p>
				<p>主演:{{ data.actor_list | actorfilter  }}</p>
			</li>
		</ul>
	</div>
</template>

<script>
import moment from 'moment'
import Vue from 'vue'
Vue.prototype.$moment = moment

	export default{
		data(){
			return {}
		},
		filters:{
		},
		mounted(){
			if(this.$store.state.comingList.length === 0){
				//ajax请求
				console.log('请求数据')
				this.$store.dispatch("getComingListAction")
			}else{
				console.log("使用缓存数据")
			}
		}
	}
</script>

<style scoped>
	ul li {
		padding: 10px;
		overflow: hidden;
	}
	
	ul li img {
		float: left;
		width: 100px;
	}
</style>
